<template>
  <div>
    <el-row type="flex">
      <el-col :xs="24" :sm="24" :md="18">
        <div class="article-left">
          <el-card>
            <!-- 标题 -->
            <div class="article-title">
              <h1>{{ data.title }}</h1>
              <div class="article-count">
                <nuxt-link
                  :to="'/user/' + data.userId"
                  target="_blank"
                  class="nickname"
                >
                  <i class="el-icon-user-solid"></i> {{ data.nickName }}
                </nuxt-link>
                <span>
                  <i class="el-icon-date"></i> {{ data.updateDate }}
                  <i class="el-icon-thumb"></i> {{ data.thumhup }}
                  <i class="el-icon-view"></i> {{ data.viewCount }}
                </span>
                <!-- 只能自己编辑自己的 -->
                <!-- v-if="
                    $store.state.userInfo &&
                    $store.state.userInfo.uid === data.userId
                  " -->
                <!-- 暂时让所有文章都可编辑 -->
                <nuxt-link
                  :to="{ path: '/question/edit', query: { id: data.id } }"
                  class="nickname"
                >
                  &nbsp;&nbsp; 编辑
                </nuxt-link>
              </div>
              <!-- 加 style="margin: 5px;" 不然会紧密连接在一起 -->
              <el-tag
                style="margin: 5px"
                v-for="item in data.labelList"
                :key="item.id"
                size="small"
              >
                {{ item.name }}
              </el-tag>
            </div>
            <!-- 内容 -->
            <div class="article-content">
              <!-- 1. 加上样式，2 使用 v-html 渲染 -->
              <div class="markdown-body" v-html="data.htmlContent"></div>
            </div>
            <el-button
              :disabled="!$store.state.userInfo"
              @click="handleThumb"
              :plain="!isThumb"
              type="primary"
              icon="el-icon-thumb"
              size="medium"
              >赞
            </el-button>
          </el-card>
          <!-- 回答区
            1. 循环出每个问答对象，转成一个数组 [comment]，评论没有子评论的情况下一样可以循环出评论当前评论，
            2. :showComment="false" 不显示评论输入框
          -->
          <div>
            <h2>精彩回答</h2>
            <el-card v-if="!commentList || commentList.length === 0"
              >暂无回答</el-card
            >
            <el-card v-for="comment in commentList" :key="comment.id">
              <!-- userId 当前登录用户id，userImage 当前登录用户头像，
                doSend 公共评论事件函数，doChidSend 回复评论事件函数, doRemove 删除 -->
              <Comment
                :authorId="data.userId"
                :userId="userId"
                :userImage="userImage"
                :showComment="false"
                @doChildSend="doChildSend"
                @doRemove="doRemove"
                :commentList="[comment]"
              >
              </Comment>
            </el-card>
          </div>
          <!-- 编写回答 -->
          <div>
            <h2>编写回答</h2>
            <!-- 未登录 -->
            <el-card v-if="!$store.state.userInfo">
              <h4>
                登录后参与交流、获取后续更新提醒 {{ $store.state.userInfo }}
              </h4>
              <div>
                <!-- 不要以 / 开头，LoginPage -->
                <el-button
                  @click="$store.dispatch('LoginPage')"
                  type="primary"
                  size="small"
                  >登录
                </el-button>
                <el-button
                  @click="$store.dispatch('LoginPage')"
                  type="primary"
                  size="small"
                  plain
                  >注 册</el-button
                >
              </div>
            </el-card>
            <div v-else>
              <!-- 主体内容，使用 mavon-editor 渲染出markdown编辑器
:autofocus="false" 输入框不自动获取焦点 -->
              <mavon-editor
                :autofocus="false"
                ref="md"
                v-model="mdContent"
                @change="getMdHtml"
                @imgAdd="uploadContentImg"
                @imgDel="delContentImg"
              />
              <el-row style="margin-top: 20px" type="flex" justify="center">
                <el-button type="primary" @click="submitReplay"
                  >提交问答</el-button
                >
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右侧-->
      <el-col class="hidden-sm-and-down" :md="6">
        <el-row>
          <el-col>
            <!-- 固钉距离 80px -->
            <Affix :offset="80">
              <!-- parentClass 指定文章内容的父元素class值 -->
              <Directory parentClass="article-content"></Directory>
            </Affix>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 高亮显示md内容样式
import "@/assets/css/md/github-markdown.css";
import "@/assets/css/md/github-min.css";
//导入格式化日期文件
import { dateFormat } from "@/utils/date";
//导入固钉组件
import Affix from "@/components/common/Affix/index.vue";
//导入文章目录组件
import Directory from "@/components/common/Directory/index.vue";
//导入评论区域组件
import Comment from "@/components/common/Comment/index.vue";
export default {
  name: "Question",
  components: {
    Affix,
    Directory,
    Comment,
  },
  validate({ params }) {
    //校验路由参数必须是数值类型
    return /^\d+$/.test(params.id);
  },
  data() {
    return {
      mdContent: "",
      htmlContent: "",
      //当前是否点赞
      isThumb: this.$cookies.get(`question-thumb-${this.$route.params.id}`)
        ? this.$cookies.get(`question-thumb-${this.$route.params.id}`)
        : false,
      // 当前登录用户id
      userId: this.$store.state.userInfo && this.$store.state.userInfo.uid,
      // 当前登录用户头像，
      userImage:
        this.$store.state.userInfo && this.$store.state.userInfo.imageUrl,
    };
  },
  methods: {
    // 获取回答内容 mdContent: md 内容，htmlContent：转成后的html
    getMdHtml(mdContent, htmlContent) {
      this.mdContent = mdContent;
      this.htmlContent = htmlContent;
    },
    // 上传内容图片 (图片位置编号, File对象)
    uploadContentImg(pos, file) {
      // 第一步.将图片上传到服务器
      var fd = new FormData();
      fd.append("file", file);
      this.$uploadImg(fd)
        .then((response) => {
          // console.log(response)
          // 第二步.将返回的url替换到文本原位置! [...](0) -> ![...](url)
          this.$refs.md.$img2Url(pos, response.data);
        })
        .catch((error) => {
          this.$refs.md.$img2Url(pos, "上传失败");
        });
    },
    // 删除内容图片
    delContentImg(urlAndFileArr) {
      const fileUrl = urlAndFileArr[0]; // 文件URL
      const file = urlAndFileArr[1]; // File对象
      console.log("删除图片", fileUrl, file);
      commonApi.deleteImg(fileUrl);
    },
    // 提交回答
    submitReplay() {
      if (this.htmlContent) {
        this.doChildSend(this.htmlContent, -1, this.mdContent);
      } else {
        this.$message.error("请输入回答内容");
      }
    },

    //处理文章点赞
    async handleThumb() {
      this.isThumb = !this.isThumb;
      const count = this.isThumb ? 1 : -1;
      //发请求更新后端数据库的点赞数据
      const { code } = await this.$updateArticleThumb(
        this.$route.params.id,
        count
      );
      //如果后端更新成功就改变前端的显示
      if (code === 20000) {
        //更新data中的点赞数据
        this.data.isThumb = this.data.isThumb + count;
        // 保存到cookie中， 注意是 this.$cookies
        this.$cookies.set(
          `article-thumb-${this.$route.params.id}`,
          this.isThumb,
          {
            maxAge: 60 * 60 * 24 * 365 * 5, // 保存5年
          }
        );
      }
    },
    // 发布回复评论触发, parentId不传默认为-1
    doChildSend(htmlContent, parentId = -1, mdContent) {
      // 回复评论：父评论ID，评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
      console.log(`对父评论ID=${parentId} 发布的回复评论内容：${htmlContent}`);
      const data = {
        htmlContent,
        mdContent,
        parentId,
        questionId: this.$route.params.id,
        userId: this.userId,
        userImage: this.userImage,
        nickName:
          this.$store.state.userInfo && this.$store.state.userInfo.nickName,
      };
      // 提交
      this.$addReplay(data).then((response) => {
        //清空
        this.htmlContent = "";
        this.mdContent = "";
        //刷新评论
        this.refreshReplay();
      });
    },
    // 获取评论
    async refreshReplay() {
      const { data } = await this.$getReplayByQuestionId(this.$route.params.id);
      this.commentList = data;
    },

    // 删除评论
    async doRemove(id) {
      console.log(`删除评论id${id}`);
      const { code } = await this.$deleteCommentById(id);
      if (code === 20000) {
        this.refreshReplay();
      }
    },
    getDateFormat(date) {
      return dateFormat(date);
    },
  },
  //设置当前页面的head属性
  head() {
    return {
      title: this.data.title, // 浏览器显示的标题
    };
  },
  // 获取数据
  async asyncData({ params, app }) {
    const { data } = await app.$getQuestionById(params.id);
    // 更新浏览数，判断 Cookie 中是否已经存在
    const isView = app.$cookies.get(`question-view-${data.id}`);
    // 没有值，则更新浏览数
    if (!isView) {
      const { code } = await app.$updateQuestionViewCount(data.id);
      if (code === 20000) {
        // 更新后页面上+1浏览数，省得再查询
        data.viewCount++;
      }
      // 保存到cookie中，关闭浏览器后删除
      app.$cookies.set(`question-view-${data.id}`, true);
    }
    // 通过问题ID查询所有回复数据接口
    const { data: commentList } = await app.$getReplayByQuestionId(params.id);
    return { data, commentList };
  },
};
</script>

<style scoped>
.article-left {
  margin: 0 15px;
}
.article-left .el-card {
  padding: 15px;
  margin-bottom: 10px;
}
/* 文章标题 */
.article-title h1 {
  font-size: 30px;
  font-weight: 700;
  margin-top: 0px;
}
.article-count {
  font-size: 14px;
  line-height: 24px;
  color: #999;
}

.article-content {
  margin-top: 30px;
}
.article-comment {
  margin-top: 40px;
}
/* 表情不会被遮住 */
.el-card {
  overflow: visible;
}
</style>